<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<base href="<%=basePath%>">

<meta name="description" content="">
<meta name="author" content="">
<!--<link rel="icon" href="../../favicon.ico">-->

<title>Bootstrap Demo</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<%-- <!--文件上传 -->
<link href="<%=path%>/css/fileinput.min.css" media="all"
	rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="<%=path%>/css/mystyle.css" />
<link type="text/css" rel="stylesheet" href="<%=path%>/css/chart.css" />
<link href="<%=path%>/css/fileinput.css" media="all" rel="stylesheet"
	type="text/css" />

<!-- Custom styles for this template -->
<link href="navbar-static-top.css" rel="stylesheet">

<link type="text/css" rel="stylesheet" href="<%=path%>/css/mystyle.css" />
<link type="text/css" rel="stylesheet" href="<%=path%>/css/chart.css" /> --%>
<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>

<%-- <!--文件上传 -->
<script src="<%=path%>/js/file/fileinput.min.js" type="text/javascript"></script>
<script src="<%=path%>/js/file/fileinput_locale_fr.js"
	type="text/javascript"></script>
<script src="<%=path%>/js/file/fileinput_locale_es.js"
	type="text/javascript"></script>

<script type="text/javascript" src="<%=path%>/js/d3.js"></script> --%>

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><!--
<script src="../../assets/js/ie8-responsive-file-warning.js"></script>-->
<!-- [endif]-->
<!--<script src="../../assets/js/ie-emulation-modes-warning.js"></script>-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<%--     [if lt IE 9]
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="<%=path%>/js/respond.min.js"></script>
    <![endif] --%>
</head>

<!-- sigma-->
<script src="<%=path%>/js/sigma.min.js"></script>
<script src="<%=path%>/js/jquery-scrolltofixed-min.js"></script>
<script src="<%=path%>/js/highlight.pack.js"></script>
<script src="<%=path%>/js/sigma.plugins.animate.min.js"></script>
<script src="<%=path%>/js/sigma.parsers.json.min.js"></script>
<script src="<%=path%>/js/sigma.plugins.neighborhoods.min.js"></script>
<script src="<%=path%>/js/sigma.plugins.dragNodes.min.js"></script>
<script src="<%=path%>/js/sigma.layout.forceAtlas2.min.js"></script>

<style type="text/css">
#sigma-container {
	max-width: 700px;
	height: 500px;
	margin: auto;
}
</style>

<body>
	<!-- Begin Content -->

	<div class="panel panel-default">

		<div class="panel-body">
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-2">
					<h4>数据集:</h4>
				</div>
				<div class="col-lg-5 col-md-5 col-sm-5">
					<select data-toggle="dropdown" id="datasets"
						class="form-control select select-success">
						<option value="none">设置数据集</option>
					</select>
				</div>
				<div class="col-md-5 col-lg-5 col-sm-5">
					<input id="topK" type="text" class="form-control col-md-2"
						placeholder="Top K" aria-describedby="basic-addon1">
				</div>
			</div>
		</div>

		<div class="panel-body ">
			<div class="row">
				<h4 class="col-sm-2">选择算法:</h4>
				<div class="btn-group" role="group">
					<button type="button" class="btn btn-default col-sm-3 "
						onclick="showPredictionInfo('CN')">Common Neighbors</button>
					<button type="button" class="btn btn-default col-sm-3"
						onclick="showPredictionInfo('JS')">Jaccard Similarity</button>
					<button type="button" class="btn btn-default col-sm-3"
						onclick="showPredictionInfo('AA')">Adamic and Adar
						Measure</button>
					<button type="button" class="btn btn-default col-sm-3"
						onclick="showPredictionInfo('PA')">Preferential
						Attachment</button>
				</div>
			</div>
		</div>

	</div>

	<div class="panel panel-default">
		<div class="panel-body">
			<div id="sigma-container"></div>

		</div>
	</div>

	<div class="panel panel-default panel-info" id="output_panel"
		style="display: none;"></div>
	<div id="ajaxdataset" style="display: none;"></div>
	<!-- End Content -->
</body>

<script>

var mysigma=null;
var fileName = '';

var lastResult = null;
var currentResult = null;
 
initSigma(fileName);

$.ajax({
	type : "post",//请求方式
	url : "servlet/fileslistservlet",//发送请求地址
	dataType : "json",
	//请求成功后的回调函数有两个参数
	success : function(data) {
		var datats=eval(data);
		datats.forEach(function(mydata) {
			$("#datasets").append("<option value='"+mydata+"'>"+mydata+"</option>"); 
		});
	}
});

$("#datasets").change(function(data){
	if($(this).val()=="none"){
		$("#ajaxdataset").val("");
	}else{
		
	if (mysigma != null) {//若存在则清空
				$("#sigma-container").empty();
				mysigma.graph.nodes().length = 0;
				mysigma.graph.edges().length = 0;
				delete mysigma.graph.nodes();
				delete mysigma.graph.edges();
				mysigma.refresh();
			}
			$('#output_panel').hide();
			lastResult=null;
			initSigma("<%=path%>/duansky/data/"+$(this).val());
			
		$("#ajaxdataset").val($(this).val());
	}
	
	 });
	
	function initSigma(fileName){
	    sigma.parsers.json(fileName, {
			container : 'sigma-container'
		},
	
		function(s) {
			mysigma = s;
			mysigma.settings({
				edgeColor : 'default',
				defaultEdgeColor : '#ccc',
			});
	
			mysigma.graph.nodes().forEach(
					function(n) {
						 n.color = [ '#f8aba6', '#f47a55', '#fab27b', '#ffce7b',
								'#45b97c', '#65c294', '#585eaa', '#9b95c9' ][Math
								.round(Math.random() * 8)];
					});
	
			mysigma.graph.edges().forEach(function(e) {
				e.type = 'arrow';
			});
	
			mysigma.refresh();
		});
	}
	

	var uploadFile = function() {
				
	};
			
	function checkK(input){
	     var re = /^[0-9]+.?[0-9]*$/;   //只能输入数字 
	     if (!re.test(input))
	       	return false;
	    
	     return true;
	}

	function showPredictionInfo(option) {
		
		if(!checkK(document.getElementById("topK").value)){
			alert("请输入正确的边数！");
			return;
		}
		
		if( document.getElementById("topK").value == 0 ){
			alert("边数不能为0！");
			return;
		}
	
		if($("#ajaxdataset").val() == ""){
			alert("选择数据集！");
			return;
			}
		var params = {
			"func_type" : option,
			"topK": document.getElementById("topK").value,
			"dataset":$("#ajaxdataset").val()
		};
		$.ajax({
			type:"post",//请求方式
			url : "servlet/liyingservlet",//发送请求地址
			dataType : "json",
			data : params,
			//请求成功后的回调函数有两个参数
			success : function(data, textStatus) {
				var objs = eval(data); 
				console.log("add " + objs.length + " new edges");
				
				currentResult = objs;
				
				// 删除上个结果
				if(lastResult != null){
					for (var i = 0; i < lastResult.length; i++) {
						var edge = lastResult[i];
						mysigma.graph.dropEdge(edge.id);
					}
					
					mysigma.refresh();
				}				
				lastResult = currentResult;
					
				// 重新添加新的 结果
				for (var i = 0; i < objs.length; i++) {
					var edge = objs[i];
					console.log("e" + edge.id + ":" + edge.source + "=>"
							+ edge.target + ":" + edge.value);

					mysigma.graph.addEdge({
						id : edge.id,
						source : edge.source,
						value : edge.value,
						target : edge.target,
						state : edge.state,

						type : 'arrow',
						size : 4,
						color : '#f00'
					});

					mysigma.graph.nodes(edge.source).color = '#f00';
					mysigma.graph.nodes(edge.target).color = '#f00';
				}

				mysigma.refresh();

				showOutputPanel(objs);
			}
		});
	}
	
	
	function showOutputPanel(objs){
		var ui = document.getElementById("output_panel");
		ui.innerHTML = "";

		var string = "";
		var tableStr = "<table class='table'>"
			+ "<thead> <tr><th># </th><th>Source</th><th>Target</th><th>Score</th></tr></thead>"
			+ "<tbody>"
			
		for (var i = 0; i < objs.length; i++) {
			var edge = objs[i];
			string += "边(" + edge.source + ", " + edge.target + "), "
			
			tableStr += "<tr><td>" + (i+1) + "</td><td>" + edge.source + "</td><td>" + edge.target
			 			+ "</td><td>" + edge.value + "</td><tr>";
		} 
		string +=  "最可能出现";
		
		var html = "<div class='panel-heading'>" + "预测结果:" + "</div>"
			+ tableStr + "</tbody></table>"
			+ "<div class='panel-body'>" + string + "</div>";
		
		ui.innerHTML += html;
		ui.style.display="block";
	}
</script>
</html>